<template>
  <div class="wxMiniprogram">
    <el-alert type="warning" show-icon size="mini">
      <template slot="title">
        <span>小程序必须已经绑定关联到企业微信，否则将无法正常发送</span>
      </template>
    </el-alert>
    <el-form ref="mini" :rules="rules" :model="mini" label-width="120px" style="margin-top: 10px">
      <el-form-item label="小程序标题" prop="title">
        <el-input class="al-width-300" v-model="mini.title" placeholder="请输入小程序标题" maxlength="15"
                  show-word-limit/>
      </el-form-item>
      <el-form-item label="小程序ID" prop="appId">
        <el-input class="al-width-300" v-model="mini.appId" placeholder="请输入小程序AppId"/>
        <span class="al-tips-text-org">如何查询小程序ID?</span>
      </el-form-item>
      <el-form-item label="页面路径" prop="path">
        <el-input class="al-width-300" v-model="mini.page"
                  placeholder="请输入小程序路径,必须以.html作为后缀"/>
      </el-form-item>
      <el-form-item label="封面" prop="url">
        <wx-file-upload
          :list="miniPicture"
          tips="支持jpg/jpeg/png格式，建议520*416" fileTypes="png,jpg,jpeg"
          :limit="1" @success="miniCover" @remove="miniRemoveCover"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import WxFileUpload from "@/components/wxqy/wxFileUpload/wxFileUpload";
import {formValite} from "@/utils/validate";

export default {
  name: "wxMiniprogram",
  components: {WxFileUpload},
  props: ['model'],
  watch: {
    model: {
      immediate: true,
      handler(val) {
        this.reload(val)
      }
    }
  },
  data() {
    return {
      miniPicture: [],
      mini: this.model || {},
      rules: {
        title: [{required: true, message: '请输入小程序标题', trigger: 'blur'}],
        appId: [{required: true, message: '请输入小程序appId', trigger: 'blur'}],
        path: [{required: true, message: '请输入小程序路径', trigger: 'blur'}],
        url: [{required: true, message: '请上传小程序封面', trigger: 'blur'}],
      }
    }
  },
  methods: {
    reload(v) {
      if (v){
        this.miniPicture.push({url: v.url})
      }
    },
    findData() {
      let success = formValite(this.mini, this.rules, this)
      return {success: success, data: this.mini}
    },
    miniRemoveCover(files) {
      this.mini.url = null
    },
    miniCover(file) {
      this.mini.url = file.url
    }
  },
  created() {
    console.log('组件 this....')
  }
}
</script>

<style scoped lang="scss">
.wxMiniprogram {
  ::v-deep.el-form-item {
    margin-bottom: 22px;
  }

  ::v-deep .el-alert {
    padding: 0 16px;

    .el-alert__title {
      color: #2b2f3a;
    }
  }
}
</style>
